<template>
    <div class="page-container">
        <!--  -->
        <Above></Above>
        <div class="banner">
            <img src="../assets/banner.png" alt="">
        </div>
        <div style="background-color: #f0f4ff;width: 100%;">
            <div class="banner_1">
                <img style="width: 359px;height: 257px;" src="../assets/banner1.png" alt="">
                <div class="text">
                    <p class="title_1">标委会简介</p>
                    <img class="image_7"
                        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57427bcf685049ba43112d644dd51d11713727b4a6742ddb45b7f9bf1742cbdf" />
                    <div style="position: relative;">
                        <p class="title_2">中国电力企业联合会于1988年由国务院批准成立，是全国电力行业企事业单位的联合组织、非营利的社会团体法人，至今已历经七届理事会。</p>
                        <p class="title_2">
                            第一、二届理事会期间，中电联作为国家事业单位先后由能源部和电力部归口管理，其主要任务是为电力企事业单位提供服务，并协助能源部和电力部加强行业管理。1998年以后，中电联转为在...
                        </p>
                        <p class="more absolute"><span>MORE</span><span class="triangle"></span></p>
                    </div>
                </div>
            </div>
            <div class="banner_2">
                <div class="banner_2_left">
                    <!-- <p class="title_1">通知公示</p> -->
                     <div class="fr">
                        <p class="title_1">通知公示</p>
                        <p class="more absolute"><span>MORE</span><span class="triangle"></span></p>
                     </div>
                    <img class="image_7Pas"
                        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57427bcf685049ba43112d644dd51d11713727b4a6742ddb45b7f9bf1742cbdf" />
                    <ul class="notice">
                        <li v-for="item in paragraph1" :key="item.id">
                            <span>{{ item.title }}</span>
                            <span>{{ item.Time }}</span>
                        </li>
                    </ul>
                </div>
                <div class="banner_2_right">
                    <div class="fr">
                        <p class="title_1">标准公开</p>
                        <p class="more absolute"><span>MORE</span><span class="triangle"></span></p>
                     </div>
                    <img class="image_7Pas"
                        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57427bcf685049ba43112d644dd51d11713727b4a6742ddb45b7f9bf1742cbdf" />
                    <ul class="notice1">
                        <li v-for="item in paragraph2" :key="item.id"><span>{{ item.title }}</span><span>{{
                            item.Time
                                }}</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="list">
                <div class="block" :style="{ background: item.lanhuBg0 }" v-for="item in loopData0"
                    :key="item.slot1">
                </div>
            </div>
        </div>
        <getBelow></getBelow>
    </div>
</template>

<script>
import Above from '@/components/Base/getAbove'
import getBelow from '@/components/Base/getBelow.vue';
export default {
    data() {
        return {
            paragraph1: [
                {
                    title: '关于中电联地理信息应用标准化技...',
                    Time: '2025-01-24',
                    id: 1
                },
                {
                    title: '关于中电联地理信息应用标准化技...',
                    Time: '2025-01-24',
                    id: 2
                },
                {
                    title: '关于中电联地理信息应用标准化技...',
                    Time: '2025-01-24',
                    id: 3
                },
                {
                    title: '关于中电联地理信息应用标准化技...',
                    Time: '2025-01-24',
                    id: 4
                },
                {
                    title: '关于中电联地理信息应用标准化技...',
                    Time: '2025-01-24',
                    id: 5
                },
                {
                    title: '关于中电联地理信息应用标准化技...',
                    Time: '2025-01-24',
                    id: 6
                },
                {
                    title: '关于中电联地理信息应用标准化技...',
                    Time: '2025-01-24',
                    id: 7
                },
                {
                    title: '关于中电联地理信息应用标准化技...',
                    Time: '2025-01-24',
                    id: 8
                }
            ],
            paragraph2: [
                {
                    title: 'GB/IT 31235-2024.',
                    Time: '±800kV直流输电线路金具技...',
                    id: 1
                },
                {
                    title: 'GB/IT 31235-2024.',
                    Time: '±800kV直流输电线路金具技...',
                    id: 2
                },
                {
                    title: 'GB/IT 31235-2024.',
                    Time: '±800kV直流输电线路金具技...',
                    id: 3
                },
                {
                    title: 'GB/IT 31235-2024.',
                    Time: '±800kV直流输电线路金具技...',
                    id: 4
                },
                {
                    title: 'GB/IT 31235-2024.',
                    Time: '±800kV直流输电线路金具技...',
                    id: 5
                },
                {
                    title: 'GB/IT 31235-2024.',
                    Time: '±800kV直流输电线路金具技...',
                    id: 6
                },
                {
                    title: 'GB/IT 31235-2024.',
                    Time: '±800kV直流输电线路金具技...',
                    id: 7
                },
                {
                    title: 'GB/IT 31235-2024.',
                    Time: '±800kV直流输电线路金具技...',
                    id: 8
                }
            ],
            loopData0: [
                {
                    lanhuBg0: 'url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/3643662d441d46939a2200fff45ac9ec_mergeImage.png)',
                    slot1: 1,
                },
                {
                    lanhuBg0:
                        'url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/3b067d5c0af245ebb23f7186c71fc2a8_mergeImage.png)',
                    slot1: 2,
                },
                {
                    lanhuBg0: 'url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/79dc8c59dbe3444dbe75df1129f031e6_mergeImage.png)',
                    slot1: 3,
                },
                {
                    lanhuBg0: 'url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/f0db934063a6409eb4d8713b5bd73812_mergeImage.png)',
                    slot1: 4,
                },
            ]
        }
    },
    components: {
        Above,
        getBelow
    }
}
</script>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.page-container {

    overflow: hidden; // 防止滚动条
}

.banner {
    width: 100vw;

    img {
        width: 100%;
    }
}

.banner_1 {
    display: flex;
    width: 1200px;
    margin: -5px auto;
}

.text {
    margin-left: 35px;
}

.title_1 {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 32px;
    color: #0A3F83;
    line-height: 45px;
    font-style: normal;
    margin-bottom: -10px;
}

.image_7 {
    width: 763px;
    height: 3px;
}

.title_2 {
    width: 764px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 23px;
    color: #1D1D1D;
    line-height: 40px;
    text-align: justify;
    font-style: normal;
    text-indent: 2em;
}

.more {
    height: 33px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 24px;
    color: #0A3F83;
    line-height: 33px;
    text-align: right;
    font-style: normal;
    position: relative;

    span {
        display: inline-block;
    }
}

.absolute {
    position: absolute;
    right: 27px;
    bottom: -4px;
}

.triangle {
    width: 0;
    height: 0;
    border: 13px solid;
    border-color: transparent transparent transparent #0A3F83;
    position: absolute;
    right: -35px;
    top: 2px;
}

.image_7Pas {
    width: 100%;
    height: 3px;
}

.banner_2 {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    padding-bottom: 30px;
}

.banner_2_left {
    width: 580px;
}

.banner_2_right {
    width: 580px;
}

.notice {
    width: 100%;
    height: 330px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 24px;
    color: #1D1D1D;
    line-height: 42px;
    text-align: left;
    font-style: normal;

    li {
        display: flex;
        justify-content: space-between;
    }
}

.notice li span:nth-of-type(2) {
    color: #bbb;
}

.notice1 {
    width: 100%;
    height: 330px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 24px;
    color: #1D1D1D;
    line-height: 42px;
    text-align: left;
    font-style: normal;

    li {
        display: flex;
        justify-content: space-between;
    }
}

.notice1 li span:nth-of-type(2) {
    color: #3895FF;
}

.footer {
    width: 100vw;
    margin: 35px 0;
}

.list {
    display: flex;
    width: 1200px;
    margin: 0 auto;
}

.block {
    height: 154px;
    margin-right: 20px;
    width: 284px;
    border: 1px dashed;
}
.fr{
    display: flex;
    justify-content: space-between;
    position: relative;
}
</style>